<script setup>
import { ref } from 'vue'
const timeRange = ref("");
const ticketType = ref()
const state = ref()
const options = [
  {
    value: "1",
    label: "全价票"
  },
  {
    value: "2",
    label: "学生票"
  },
  {
    value: "3",
    label: "儿童票"
  },
  {
    value: "4",
    label: "老人票"
  },
]
const stateOption = [
  {
    value: 1,
    label: "已支付"
  },
  {
    value: 0,
    label: "未支付"
  }
]
</script>
<template>
  <div class="header">
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <span>订单管理</span>
        </div>
      </template>
      <el-from class="search-form" inline>
        <el-form-item label="姓名"><el-input v-model="name">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template></el-input></el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="凭证类型">
          <el-select v-model="ticketType" placeholder="选择凭证类型" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="state" placeholder="选择订单状态" clearable>
            <el-option v-for="item in stateOption" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-from>
    </el-card>
  </div>
</template>
<style scoped>
.header {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  position: relative;
}

.search-form {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.search-form .el-form-item {
  margin-bottom: 16px;
  margin-right: 16px;
}

.search-form .el-input,
.search-form .el-select,
.search-form .el-date-picker {
  width: 220px;
}
</style>
